<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动虚线</title>
    <script
            src="http://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
            crossorigin="anonymous"></script>
    <style>
        #line {
            width: 100%;
            margin: 20px 0;
            height: 300px;
            background: #eee;
        }
        path {
            stroke: steelblue;
            stroke-width: 10;
            fill: none;
        }
        .selector{
            -webkit-filter: url("#blur");
        }
    </style>
    <!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>-->
    <script src="https://cdn.bootcss.com/d3/5.9.2/d3.js"></script>
</head>
<body>
<script>
    //初始化svg对象
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 500).attr("height", 400);
    const defs1 = svg.append("defs");
    const linearGradient = defs1.append("filter")
        .attr("id","blur")
        .attr("x","-50%")
        .attr("y","-50%")
        .attr("width","200%")
        .attr("height","200%")
    linearGradient.append("feDropShadow")
        .attr("dx", "0")
        .attr("dy","0")
        .attr("stdDeviation","0")
        .attr("flood-color","hsla(180,90%,40%,0.9)")
    var x = d3.scaleLinear().domain([0, 10]).range([0, 700]); //线性比例是连续定量数据的良好默认选择,因为它们保留了比例差异
    var y = d3.scaleLinear().domain([0, 10]).range([10, 290]);
    var data = d3.range(50).map(function () {
        return Math.random() * 10
    });
    console.log(data);
    var line = d3.line()
    // .curve(d3.curveCardinal)
        .x(function (d, i) {
            return x(i);
        })
        .y(function (d) {
            return y(d);
        });
    var path = svg.append("svg:path")
    path.attr("d", line(data))
    path.attr("class","selector")
    var defs = document.querySelector("defs"); // the  element inside the SVG
    var blur = defs.querySelector("#blur"); // the blur filter
    var blurFilter = blur.firstElementChild; // the feGaussianBlur primitive
    var multiplier=0.2;
    var xDiff= 0.01;
    var yDiff= 0.01;
    function setBlur(x,y){
        blurFilter.setAttribute("stdDeviation",x);
    }
    let flag = true;
    (function updateMotionBlur(){
        if(xDiff > 16){
            flag = false;
            xDiff = xDiff - multiplier;
        }
        if(  xDiff <= 16 && flag){
            xDiff = xDiff + multiplier;
        }else{
            xDiff = xDiff - multiplier;
            if(xDiff <= 0){
                flag = true;
            }
        }
        yDiff = 0;
        setBlur(xDiff,yDiff);
        // console.log(xDiff)
        requestAnimationFrame(updateMotionBlur);
    })();
</script>
</body>
</html>